<template>
<div class="tubiao02">
    <swiper>
      <swiper-slide
      v-for="(page, index) of pages"
      :key="index">
        <div class="icons" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src='item.imgUrl' />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  export default{
    name:'tubiao02',
    props:{
      list:Array,
    },
       computed: {
          pages () {
            const pages = []
            this.list.forEach((item, index) => {
              const page = Math.floor(index / 8)
              if (!pages[page]) {
                pages[page] = []
              }
              pages[page].push(item)
            })
            return pages
          }
        }
  }
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
  .tubiao02 >>> .swiper-container
    height :0
    padding-bottom :50%
  .tubiao02
    margin-top :.1rem
    .icons
      position :relative
      overflow :hidden
      float:left
      width :25%
      height :0
      padding-bottom :25%
      .icon-img
        position :absolute
        top :0
        left :0
        right :0
        bottom :.44rem
        box-sizing :border-box
        padding :.1rem
        .icon-img-content
          display :block
          margin : 0 auto
          height :100%
      .icon-desc
        position :absolute
        left :0
        right :0
        bottom :0
        height :.44rem
        line-height :.44rem
        color :$ztcolor
        text-align :center
        ellipsis()

</style>
